<template>
    <view class="f fv h100 po_r">
        <view class="vipBg width_1 po_a"></view>
        <view class="padding-sm" style="z-index: 9">
            <view class="vipCar width_1 f fv padding-sm">
                <view class="f fac fpj width_1">
                    <view class="f fac f1">
                        <view class="cu-avatar lg round margin-right-lg">
                            <image v-if="userinfo.avatar" class="fill" :src="userinfo.avatar" style="border-radius: 500rpx"></image>
                            <text v-else class="cuIcon-people"></text>
                        </view>
                        <view class="font_w">{{ userinfo.nickname }}</view>
                    </view>
                    <view class="text-xl font_w text-orange">黄金会员</view>
                </view>
                <view class="width_1 f fac fpj margin-top-lg">
                    <view class="f fv">
                        <view class="text-gray text-sm">账户余额</view>
                        <view class="text-price text-xl font_w">0.'00'</view>
                    </view>
                    <view @tap="toUp">升级会员</view>
                </view>
                <view class="margin-top-sm">NO.0000001</view>
            </view>
            <view class="f fac fpj padding-sm bg-white radius5 margin-top-lg">
                <view class="f">
                    积分
                    <view>0</view>
                </view>
                <view>交易记录</view>
            </view>
            <view class="f fac fpj bg-white padding-lg margin-top-lg" style="height: 150rpx; border-radius: 5px">
                <view class="f fv" style="width: 70%">
                    <view class="cu-progress round striped active">
                        <view class="bg-orange" style="width: 80%"></view>
                    </view>
                    <view class="margin-top-xs text-gray">当前比例80%</view>
                </view>
                <view class="f fv fac">
                    <view>距下一等级</view>
                    <view class="f fac">
                        还差
                        <view class="text-red text-xl margin-left-xs">99</view>
                    </view>
                </view>
            </view>
            <view class="f fv padding-sm bg-white items radius5 margin-top-lg">
                <view class="font_w">当前会员权益</view>
                <view class="width_1 f fv">
                    <view class="qyIcons">
                        <view class="qyIcon f fac fpc"><van-icon name="point-gift-o" color="white" size="50rpx" /></view>
                        <view>会员好礼</view>
                    </view>
                    <view class="qyIcons">
                        <view class="qyIcon f fac fpc"><van-icon name="point-gift-o" color="white" size="50rpx" /></view>
                        <view>会员好礼</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// page/cloud/index.js
export default {
    data() {
        return {
            list: [],
            total: 0,
            addressInfo: {},
            showWl: false,
            userinfo: {
                avatarUrl: '',
                nickname: '',
                avatar: ''
            },
            active: 3
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow(e) {
        this.setData({
            userinfo: uni.getStorageSync('userinfo')
        });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        showWlFun() {
            this.setData({
                showWl: !this.showWl
            });
        },

        toUp() {
            uni.navigateTo({
                url: '../../../page/category/index?type=vips'
            });
        },

        toAddress() {
            uni.navigateTo({
                url: '../address/index?total='
            });
        },

        showMesErr() {
            this.toastDialog.showDialog({
                content: '没有可选商品',
                icon: 'warning'
            });
        }
    }
};
</script>
<style>
/* @import './index.css'; */
</style>
